<template>
  <div>
    <van-nav-bar title="账号登录"  background-color="#21b97a" left-arrow @click-left="onClickLeft"/>
    <van-form validate-trigger='onSubmit' @submit="onSubmit">
  <van-field
    v-model="user.username"
    name="账号"
    placeholder="请输入账号"
    :rules="[{ required: true,pattern:/^[0-9a-zA-z]{5,8}$/}]"
  />
  <van-field
    v-model="user.password"
    type="password"
    name="密码"
    placeholder="请输入密码"
    :rules="[{ required: true,pattern:/^[0-9a-zA-z]{5,12}$/}]"
  />
  <div style="margin: 16px;" class="btn">
    <van-button round block type="info"   square native-type="submit">登 录</van-button>
  </div>
  <!-- <van-overlay :show="show">dddddd</van-overlay> -->
</van-form>
<div class="reg"><a>还没有账号，去注册~</a></div>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
// import { userApi } from '@/api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      user: {
        username: localStorage.getItem('username') || '',
        password: localStorage.getItem('password') || ''
      }
    }
  },
  methods: {
    ...mapActions(['getUser']),
    onClickLeft () {
      history.back()
    },
    async onSubmit () {
      // console.log(this.user)
      try {
        await this.getUser(this.user)
        // console.log('登陆成功')
        // Toast.loading({
        //   message: '加载中...',
        //   forbidClick: true
        // })
        this.$router.replace('/home/profile')
        Toast.success('登录成功')
      } catch (err) {
        Toast.fail(err.description)
        // console.log('登陆失败', err.description)
      }
    }
  }

}
</script>

<style>
.van-cell{
  font-size: 18px;
  padding:1rem 0.42667rem 0.4rem 0.42667rem;
  line-height: center;
}
.reg{
  font-weight: 400;
  font-size: 14px;
  color: #333;
  text-align: center;
}
.van-button{
  font-size: 18px;
    height: 50px;
    line-height: 50px;
    background-color: #1cb676;
    border: 1px solid #1cb676;
}

.btn{
  position: relative;
}
.van-nav-bar__content{
  background-color:#21b97a
}
</style>
